<template>
  <div class="inventory chart-container">
    <div class="chart" id="chart_left1"></div>
  </div>
</template>

<script>
export default {
    name:"inventorTotalComponent",
    data() {
        return {
        
        }
    },
    mounted() {
        this.getEchartLeft1();
    },
    methods: {
        getEchartLeft1() {
            const chartDom = document.getElementById('chart_left1');
            const myChart = this.$echarts.init(chartDom);
            let option;

            option = {
                tooltip: {
                    trigger: 'item'
                },
                
                series: [
                    {
                    name: '库存',
                    type: 'pie',
                    radius: ['40%', '80%'],
                    avoidLabelOverlap: false,
                    center: ['50%', '50%'],
                    data: [
                        { value: 1048, name: '成品' },
                        { value: 735, name: '半成品' },
                        { value: 580, name: '原材料' },
                        { value: 484, name: '实验材料' },
                        { value: 300, name: '资材' },
                        { value: 300, name: '靶材' },
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                    }
                ]
            };
            option && myChart.setOption(option);
            window.addEventListener('resize', () => {
                 myChart.resize()
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.inventory {
  .chart {
    height: 4rem;
    width: 100%;
  }
}
</style>